<template>
    
    <div class="test">
        <p class="hello">Hello</p>
    </div>


    <el-row :gutter="0">
        <el-col :span="12" :offset="6">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>
</template>
    


<script lang="ts">
import { defineComponent, ref } from 'vue'
// import elementResizeDetectorMaker from 'element-resize-detector'

export default defineComponent({

    components: {

    },
    mounted() {

        // const erd = elementResizeDetectorMaker()
        // const fh = document.getElementById("aaa")
        // let that = this
        // this.$nextTick(() => {
        //     erd.listenTo(fh, element => {
        //         that.$nextTick(function () {
        //             if (document.body.clientWidth < 797) {
        //                 this.$router.replace('/m')
        //             }
        //         })

        //     })
        // })

    }
})
</script>

<style scoped>
.test {
    width: 20rem;
    height: 1rem;
    background-color: bisque;
    text-align: center；;
}
.hello {
    color: red;
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.hello{
    font-size: 16px;
}
</style>